@import 'quasar/src/css/variables.sass';

// 自定义断点变量
$breakpoint-xs-max: 599px;
$breakpoint-sm-max: 1023px;

// 响应式表格调整
@media (max-width: $breakpoint-xs-max) {
  .q-table {
    th,
    td {
      padding: 4px 8px !important;
    }

    .q-btn {
      min-width: 0 !important;
      padding: 0 4px !important;
    }
  }

  .q-card__section {
    padding: 8px !important;
  }
}

// 表格全局优化
.q-table {
  // 表头固定
  thead tr th {
    font-weight: bold;
    background-color: $grey-2;
    position: sticky;
    top: 0;
    z-index: 1;
    transition: box-shadow 0.3s ease;

    // 滚动时阴影效果
    &.q-table--col-scrolling {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
  }

  // 行悬停效果
  tbody tr:hover {
    background-color: rgba($primary, 0.04);
  }

  // 移动端紧凑模式
  @media (max-width: $breakpoint-sm-max) {
    font-size: 0.875rem;

    .q-btn {
      min-height: 1.5rem;
      padding: 0 6px;
    }
  }

  // 斑马纹效果（可选）
  &--striped tbody tr:nth-child(even) {
    background-color: $grey-1;
  }
}

// 按钮组优化
.q-btn-group {
  .q-btn {
    margin: 0;

    // 相邻按钮合并边框
    & + .q-btn {
      margin-left: -1px;
    }
  }

  // 移动端自适应
  @media (max-width: $breakpoint-xs-max) {
    flex-wrap: wrap;
    gap: 4px;
  }
}

// 表单元素优化
.q-field {
  &--dense {
    .q-field__control,
    .q-field__marginal {
      height: 36px;
    }

    // 移动端调整
    @media (max-width: $breakpoint-xs-max) {
      .q-field__control {
        min-height: 42px; // 增大点击区域
      }
    }
  }

  // 标签样式
  &__label {
    font-weight: 500;
  }
}

// 卡片系统优化
.q-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  &__section {
    &--header {
      padding: 12px 16px;
      background-color: $grey-2;
      border-bottom: 1px solid $separator-color;

      // 移动端标题
      @media (max-width: $breakpoint-xs-max) {
        padding: 8px 12px;
      }
    }

    // 内容区域
    &--content {
      padding: 16px;

      @media (max-width: $breakpoint-xs-max) {
        padding: 12px;
      }
    }
  }
}

// 操作按钮区域
.operation-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;

  @media (max-width: $breakpoint-xs-max) {
    gap: 4px;

    .q-btn {
      margin: 2px;
      min-width: 24px;
      padding: 0 8px;
    }
  }

  // 对话框底部按钮
  .dialog-actions & {
    justify-content: flex-end;
    margin-top: 24px;
  }
}

// 响应式工具类（扩展）
.responsive-hide {
  &--xs {
    @media (max-width: $breakpoint-xs-max) {
      display: none !important;
    }
  }

  &--sm {
    @media (max-width: $breakpoint-sm-max) {
      display: none !important;
    }
  }
}

// 打印优化
@media print {
  .no-print {
    display: none !important;
  }

  .q-table {
    thead {
      display: table-header-group;
    }
  }
}

/* ==============================================
   动画过渡效果 
   ============================================== */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
